<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    text  普通文本输入狂
    password  密码
    submit 提交按钮
    reset 清除表单内容按钮
    radio 单选框
    checkbox
      多选框
    hidden
      隐藏域
      https://www.cnblogs.com/Erik_Xu/p/5481441.html
    file
      文件上传

    image

    HTML5 会自带验证
      email
        邮箱 
        在移动端会自动显示方便输入邮箱的键盘
      url
        网址
        在移动端会自动显示方便输入网址的键盘
      number
        数字，pc端会显示上下按钮可以提供数字增减只能输入数字
        移动端可以自动弹出输入数字的键盘
      tel
        电话
        显示输入电话的键盘
      search
        搜索，在input中会有删除按钮
        移动端，回车键会变成搜索按钮  
      
      range
        滑块
      color
        颜色
      date
      month
      week
      time
      datetime
      datetime-local




  -->
  <form action="" novalidate>
    <input type="email"><br>
    <input type="url"><br>
    <input type="tel"><br>
    <input type="number"><br>
    <input type="search"><br>

    <input type="range" min="0" max="10000" value="0" step="1000"><br>
    <input type="color"><br>
    <input type="date"><br>



    <input type="submit">
  </form>
</body>
</html>